<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>自定义滚动条</title>
        <link rel="stylesheet" href="css/common.css" />
    </head>
    <body>
        <div id="box">
             <div class="content">
                <p>layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。

在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer（已被5449414人次关注）。layer 甚至兼容了包括 IE6 在内的所有主流浏览器。她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。

layer 采用 MIT 开源许可证，将会永久性提供无偿服务。因着数年的坚持维护，截至到2017年9月13日，已运用在超过 30万 家 Web 平台，其中不乏众多知名大型网站。目前 layer 已经成为国内乃至全世界最多人使用的 Web 弹层解决方案，并且她仍在与 Layui 一并高速发展。Fly</p>
        <!--    <img src="img/1.png"  width="200" height="240"/>
            <img src="img/1.png"  width="200" height="240"/> -->
                <p>layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。

在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer（已被5449414人次关注）。layer 甚至兼容了包括 IE6 在内的所有主流浏览器。她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。

layer 采用 MIT 开源许可证，将会永久性提供无偿服务。因着数年的坚持维护，截至到2017年9月13日，已运用在超过 30万 家 Web 平台，其中不乏众多知名大型网站。目前 layer 已经成为国内乃至全世界最多人使用的 Web 弹层解决方案，并且她仍在与 Layui 一并高速发展。Fly</p>
         <!--   <img src="img/1.png"  width="200" height="240"/>
            <img src="img/1.png"  width="200" height="240"/> -->
            
             </div>
             <div class="scroll">
                <div class="bar"></div>
             </div>
        </div>
        <style>
             html{height: 100%;}
             body{-webkit-user-select:none ;  height: 100%; background: url(1.jpg) no-repeat ;   background-size:cover;}
             #box{position: fixed; left: 50px; bottom: 30px; width: 600px;border-radius:10px ; overflow: hidden;  height: 400px; border: 1px solid #996600;  }
            .content{width: 560px; padding: 10px; box-sizing: border-box; -webkit-box-sizing: border-box;height: auto; color: #FFFFFF;  margin: 20px;}
            .content p{font-size: 14px; line-height: 26px;} 
            .scroll{width: 16px; height: 320px; position: absolute; right: 2px;  top: 25px; background:cornflowerblue;}
            .bar{width: 26px; height: 12px; background:fuchsia; background-size: contain; position: absolute; left: -5px; top: 0;}
        </style>
         <script type="text/javascript" src="js/jquery-2.2.4.min.js" ></script>
         <script>
            var obar=document.getElementsByClassName("bar")[0];
            var con=document.getElementsByClassName("content")[0];
//          内容移动距离                  滑块移动距离
//            --------------- ==== --------------- 
    //     内容可移动的最大值        滑块可移动的最大距离
                                 
          
            //按下去
            obar.onmousedown=function(ev){
                //获取鼠标的坐标值
                 var ev=ev||window.event;
                 console.log(ev) 
                 var y1=ev.clientY;
                 var t=obar.offsetTop;
                 document.onmousemove=function(){
                     var ev=ev||window.event;
                     var top=ev.clientY-y1+t;
//                   控制top的范围
                     if(top<0){
                        top=0
                     }else if(top>308){
                        top=308
                     }
                     //把新的坐标赋值
                     obar.style.top=top+'px';
                     //比例值
                     var s=top/308;
                     //获取内容看区域的高度
                     con.style.marginTop=-s*(con.offsetHeight-400+20)+'px'
                 }
                 
                 //抬起解绑事件
                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                 }
                 
            }
            
            
            
            
            //抬起来
            
            
         </script>
    </body>
</html>
